<template>
	<view class="contain" :style="{'padding-top': statusBarHeight}">
		
		<div class="row_between head_wrap" @click="closeLogin">
			<image src="../../static/img/close_icon.png" mode="aspectFill" />
		</div>
		
		<div class="login_text">输入验证码</div>
		<div class="phone_wrap">
			<span class="text">已发送短信至：</span>
			<span>{{phone}}</span>
		</div>
		
		<div class="login_wrap">
			<div class="row_wrap">
				<div class="row">
					<input type="number" placeholder="输入短信验证码" placeholder-class="place-holder" pattern="\d*"
						maxlength="6" class="mobile" v-model="account" @click="hideTabbar" @focus="hideTabbar" @blur="showTabbar">
						
					<image src="../../static/img/input_close.png" mode="aspectFill" v-if="isShowInputClose" @click="clearInput"></image>
					
					<span class="time_wrap" v-if="timeCtn != 0">{{timeCtn}}s后重新获取</span>
					<span class="time_wrap_active" v-else @click="retryGetCode">重新获取</span>
				</div>
			</div>
			
		</div>
		
		<div type="button" class="button" :class="{'input_active': btnActive}" :loading="isShowLoading"
			@click="checkCode">下一步</div>
		<div class="to_code_wrap">
			<span class="left_text" @click="noCode">收不到验证码？</span>
		</div>
		<div class="flex_one col">
			<div class="flex_one"></div>
			
			<div class="row_center bottom_wrap" :style="{'visibility': (tabbar?'visible':'hidden')}">
				<image src="../../static/img/logo_text.png" mode="widthFix"></image>
			</div>
		</div>
		
	</view>
</template>

<script>
	import { BASE_URL,login,checkCode } from '@/utils/api'
	import {igexinTool} from '../../utils/geTuiTool.js'
	
	export default {
		data() {
			return {
				statusBarHeight: 0,
				account: '',
				isShowInputClose: false,
				btnActive: false,
				isShowLoading: false,
				timeCtn: 60,
				phone: 0,
				phoneNum: 0,
				intervalObj: {},
				tabbar: true,
				windowHeight: '',
				url: ''
			};
		},
		watch:{
			account(){
				this.changeInput();
			}
		},
		methods:{
			showTabbar(){
				this.changeTabBar(true);
			},
			hideTabbar(){
				this.tabbar = false;
				this.$forceUpdate();
			},
			clearInput(){
				this.account = "";
				this.btnActive = false;
				this.$forceUpdate();
			},
			changeTabBar(value){
				setTimeout(()=>{
					this.tabbar = value;
					this.$forceUpdate();
				}, 100);
			},
			closeLogin: function(){
				uni.navigateBack({
					delta: 1
				});
			},
			changeInput(){
				if(this.account){
					this.isShowInputClose = true;
					if(this.account.length == 6){
						this.btnActive = true;
					}else{
						this.btnActive = false;
					}
				}else{
					this.isShowInputClose = false;
					this.btnActive = false;
				}
				this.$forceUpdate();
			},
			async getCodeAction(){
				let res = await sendCode(this.phoneNum);
				if(res.code == 1){
					uni.showToast({
					  icon: 'none',
					  title: '获取验证码成功',
					  duration: 1000
					});
					this.countDown();
				}else{
					uni.showToast({
					  icon: 'none',
					  title: res.message,
					  duration: 1000
					});
				}
			},
			
			async checkCode(){
				if(!this.btnActive){
					return;
				}
				if((!this.account) || (this.account.length != 6)){
					uni.showToast({
					  icon: 'none',
					  title: '验证码输入错误',
					  duration: 1000
					});
					return;
				};
				
				this.btnActive =false;
				this.isShowLoading = true;
				
				// let res = await checkCode(this.phoneNum,this.account);
				let res=[];
				res['code']=1;
				if(res.code == 1){
					this.toNewPwdPage();
				}else{
					uni.showToast({
					  icon: 'none',
					  title: "当前验证码无效",
					  duration: 1000
					});
				}
				this.btnActive =true;
				this.isShowLoading = false;
			},
			
			countDown() {
				let that = this;
			    this.intervalObj = setInterval(function() {
			        that.timeCtn--;
			        if (that.timeCtn <= 0) {
			            that.timeCtn = 0;
			            clearInterval(that.intervalObj);
			        } else {
						
			        }
			
			    }, 1000);
			},
			retryGetCode(){
				this.timeCtn = 60;
				this.getCodeAction();
			},
			toNewPwdPage(){
				uni.navigateTo({
					url:'../new_pwd/new_pwd?account='+this.phoneNum+"&url="+this.url
				})
			},
			noCode(){
				uni.navigateTo({
					url:'../cannot_get_pwd/cannot_get_pwd'
				})
			}
		},
		onLoad(opt) {
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
			let account = opt.account;
			this.phoneNum = opt.account;
			this.phone = account.substring(0,3)+"****"+account.substring(7, 11);
			this.countDown();
			
			this.url = opt.url;
			
			uni.getSystemInfo({
			        success: (res)=> {
			            this.windowHeight = res.windowHeight;
			        }
			    });  
				
				setTimeout(()=> {
					uni.onWindowResize((res) => {
						console.log(res.size.windowHeight);
						console.log(this.windowHeight);
				        if(res.size.windowHeight < this.windowHeight){
				            this.hideTabbar();
				        }else{
				            this.changeTabBar(true);
				        }
				    })
				},2000) 
				
		}
	}
</script>

<style lang="scss">
	input{width: 100%;}
	.contain{width: 100%; height: 95vh;display: flex;flex-direction: column;}
	.head_wrap{position: relative;}
	.head_wrap image{width:48upx;height: 48upx;position: absolute;right: 20upx; top: 20upx;}
	.login_text{color: #333333; font-size: 40upx; text-align: center; margin-top: 182upx; font-weight: bold;}
	.mobile{height: 48upx;}
	.input_active{background-color: #FFCA0A!important;}
	.phone_wrap{text-align: center;}
	.phone_wrap .text{font-size: 30upx; color: #666666;}
	.phone_wrap .phone{color: #010101; font-size: 36upx; font-weight: bold;}
			.logo_wrap{
				margin: 40upx auto 100upx;
				text-align: center;
			}
			
			.login_wrap{
				padding: 0upx 67upx;
				margin-top: 60upx;
			}
			
			.row_wrap{border-bottom: 2upx solid #E3E3E3;}
			.row_wrap image{width: 48upx; height: 48upx;}
			
			.login_wrap div{
				
				padding: 0upx 8upx;
				margin-bottom: 30upx;
			}
			
			.login_wrap input{
				margin-bottom: 0upx;
				border: none;
				background: transparent;
			}
			
			::-webkit-input-placeholder{
				color: #999999;
				font-size: 28upx;
			}
			
			.bottom_wrap{ margin-bottom: 132upx; width: 100%;}
			.bottom_wrap image{width: 305upx;}
			
			.button{
				border-radius: 16upx;
				margin: 53upx 65upx 0upx;
				box-sizing: border-box;
				background-color: #CCCCCC;
				color: #303030;
				font-size: 36upx;
				height: 94upx;
				line-height: 94upx;
				font-weight: bold;
				border: solid #F2F2F2 1upx;
				text-align: center;
			}
			uni-button:after{border: none!important;}
.time_wrap{width: 280upx; height: 53upx; line-height: 53upx; color: #FFFFFF; font-size: 24upx; background: #CCCCCC;
	 border-radius: 8upx; text-align: center; min-width: 150upx;}			
.time_wrap_active{width: 280upx; height: 53upx; line-height: 53upx; color: #333333; font-size: 24upx; background: #FFCA0A;
	 border-radius: 8upx; text-align: center; min-width: 150upx;}			
.to_code_wrap{
	color: #999999;
	font-size: 30upx;
	line-height: 1.0;
	text-align: right;
	margin: 27upx 65upx 0upx;
}
			
</style>
